<script setup lang="ts">
import { mynameFn } from '@/api/talk';
import { onMounted, ref } from 'vue';
import type{ Ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter()
let name:Ref<string> =ref('')
  const usermessages =JSON.parse(localStorage.getItem('usermessage')||'')
console.log(usermessages.img);
const img =usermessages.img
  
  
  onMounted(()=>{
    const usermessage =localStorage.getItem('usermessage')||''
    let newvalues=JSON.parse(usermessage)
    name.value =newvalues.name


  })
  function meqiaClick(){
    
  window._MEIQIA("metadata", {
    address: "杭州", // 地址
    age: "20", // 年龄
    comment: "有钱", // 备注
    email: "888888@163.com", // 邮箱
    gender: "男", // 性别
    name: "小叶", //名字
    qq: "88888888", // QQ
    tel: "18888888888", // 电话
    weibo: "无", // 微博
    weixin: "18888888888", // 微信
    contact: "18888888888", // 联系人
  });

  window._MEIQIA("showPanel");
  }
function unloginClick(){

  
  localStorage.setItem('usermessage','')
  router.push('/login')
}
function hosterclick(){
  router.push('/hoster')
}
function aboutClick(){
  router.push('/about')
}
function  changepswClick(){
  router.push('/changepsw')
}
function mymessageClick(){
  router.push('/message')
}
function walletClick(){
  router.push('/wallet')
}
function messageClick(){
  router.push('/messagecenter')
}
function saleclick(){
  router.push('/sale')
}
function homemessageClick(){
  router.push('/homemessage')
}
function buyingClick(num:number){
  router.push({
    name:'buying',
   query:{num:num}
  })
}
</script>
<template>
<main class="box">
  <header class="header">
      <slot name="left"></slot>
      <span>我的</span>
      <slot name="right"></slot>
  </header>
  <div class="content"><div class="minet">
  <img class="mineimg" :src="img" alt="">
  <div class="myname">{{name}}</div>
  </div>
  <div class="mytitle">我的订单</div>
  <van-grid>
  <van-grid-item @click="buyingClick(0)" icon="passed" text="已确认" />
  <van-grid-item @click="buyingClick(1)" icon=" https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E6%88%91%E7%9A%84/u850.svg" text="待支付" />
  <van-grid-item @click="buyingClick(2)" icon="after-sale" text="退款中" />
  <van-grid-item @click="buyingClick(3)" icon="apps-o" text="全部订单" />
</van-grid>

<van-cell @click="mymessageClick" icon="https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E6%88%91%E7%9A%84/u823.png" title="个人资料" is-link />
<van-cell @click="changepswClick" icon="https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E6%88%91%E7%9A%84/u828.png" title="修改密码" is-link />
<van-cell @click="homemessageClick" icon="https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E6%88%91%E7%9A%84/u882.png" title="我的房源信息" is-link />
<van-cell @click="hosterclick" icon="https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E6%88%91%E7%9A%84/u859.png" title="成为房东" is-link />
<van-cell @click="walletClick" icon="https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E6%88%91%E7%9A%84/u864.png" title="我的钱包" is-link />
<van-cell @click="saleclick" icon="https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E6%88%91%E7%9A%84/u872.png" title="我的优惠券" is-link />
<van-cell @click="messageClick" icon="https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E6%88%91%E7%9A%84/u877.png" title="消息中心" is-link />
<van-cell @click="meqiaClick"  icon="https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E6%88%91%E7%9A%84/u833.png" title="意见反馈" is-link />
<van-cell @click="aboutClick" icon="https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E6%88%91%E7%9A%84/u838.png" title="关于" is-link />
<button class="exitlogin" @click="unloginClick">退出登录</button>
  </div>
</main>
</template>
<style lang="scss" scoped>
.minet{
  width: 100%;
  height: 1.8rem;
  position: relative;
  background-image: url("https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E6%88%91%E7%9A%84/u819.png");
  .mineimg{
    width: 80px;
    border-radius: 50%;
    position: absolute;
    top: calc(50% - 60px);
    left:calc(50% - 40px);
  }
  .myname{
    color: white;
    font-size: 24px;
    position: absolute;
    bottom: 40px;
    left: calc(50% - 35px);
  }
}
.mytitle{
  font-size: 20px;
  font-weight: 800;
  padding: 16px;
}
.exitlogin{
  width: 60%;
  height: 0.4rem;
  margin: 20px 20% 20px;
  border: 1px solid blue;
  color: blue;
  background-color: white;
  border-radius: 5px;
}
</style>